<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="产品ID" prop="id">
        <el-input v-model="queryParams.id" placeholder="请输入产品ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName" class="single-line-label">
        <span class="label-spacing"></span>
        <el-select v-model="queryParams.productName" clearable placeholder="请选择产品名称" filterable>
          <el-option v-for="(item, i) in extData.productNameList || []" :key="i" :label="item.value"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商务信息" prop="ownerId">
        <el-select v-model="queryParams.ownerId" placeholder="请选择商务信息" clearable>
          <el-option v-for="(item, i) in extData.ownerInfoList || []" :key="i" :label="item.nickname"
            :value="item.userId"></el-option>
        </el-select>
      </el-form-item>



      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd"
          v-hasPermi="['product:productInfo:add']">新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate"
          v-hasPermi="['product:productInfo:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['product:productInfo:remove']">删除</el-button>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport"
          v-hasPermi="['product:productInfo:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productInfoList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <!-- <el-table-column label="id" align="center" prop="id" /> -->
      <el-table-column label="产品名称[ID]" align="center" prop="productName">
        <template slot-scope="scope">
          {{ scope.row.productName }} [{{ scope.row.id }}]
        </template>
      </el-table-column>

      <!-- <el-table-column label="产品类型" align="center" prop="productType" /> -->
      <el-table-column label="计价类型" align="center" prop="chargeTypeStr">
        <template slot-scope="scope">
          {{ scope.row.chargeTypeStr }}

          <el-button v-if="scope.row.chargeType == 3" size="small" type="text" @click="handleUpdateKey(scope.row)"
            v-hasPermi="['product:productInfo:keyEdit']">密钥</el-button>

        </template>
      </el-table-column>


      <el-table-column label="描述信息" align="center" prop="descInfo" />
      <el-table-column label="推荐语" align="center" prop="titleInfo" />
      <el-table-column label="展示公司名称" align="center" prop="labelInfo" />
      <el-table-column label="logo" align="center" prop="logoUrl">
        <template slot-scope="scope">
          <ImagePreview v-if="!!scope.row.logoUrl" :src="scope.row.logoUrl" :width="70" :height="80" />
        </template>
      </el-table-column>
      <el-table-column label="二维码图片" align="center" prop="backgroundLogo">
        <template slot-scope="scope">
          <ImagePreview v-if="!!scope.row.backgroundLogo" :src="scope.row.backgroundLogo" :width="70" :height="80" />
        </template>
      </el-table-column>
      <el-table-column label="放款速度" align="center" prop="speed" />
      <el-table-column label="贷款期限" align="center" prop="loanTime" />
      <el-table-column label="产品地址" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.detailUrl" target="_blank" class="blue-link">预览</a>
        </template>
      </el-table-column>
      <el-table-column label="最高额度" align="center" prop="maxAmount" />
<!--      <el-table-column label="最小金额" align="center" prop="minAmount" />-->
<!--      <el-table-column label="利率信息" align="center" prop="maxRate" />-->
      <el-table-column label="年化率" align="center" prop="minRate" />

      <el-table-column label="商务信息" align="center" prop="ownerName">
        <template slot-scope="scope">
          {{ scope.row.ownerName }} [ {{ scope.row.ownerId }} ]
        </template>
      </el-table-column>

      <!-- <el-table-column label="状态" align="center" prop="status" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['product:productInfo:edit']">修改</el-button>



          <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['product:productInfo:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改产品基本信息对话框 -->
    <el-drawer size="40%" :title="title" :visible.sync="open">
      <div class="demo-drawer-form">
        <div class="demo-drawer-form__content">
          <div class="flex">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="产品名称" prop="productName">
                <el-input v-model="form.productName" placeholder="请输入产品名称" />
              </el-form-item>
              <el-form-item label="描述信息" prop="descInfo">
                <el-input v-model="form.descInfo" placeholder="请输入描述信息" />
              </el-form-item>
              <el-form-item label="推荐语" prop="titleInfo">
                <el-input v-model="form.titleInfo" placeholder="请输入推荐语" />
              </el-form-item>
              <el-form-item label="展示公司名称" prop="labelInfo">
                <el-input v-model="form.labelInfo" placeholder="请输入公司名称" />
              </el-form-item>
              <el-form-item label="官方电话" prop="minAmount">
                <el-input v-model="form.minAmount" placeholder="请输入官方电话" />
              </el-form-item>
              <el-form-item label="Slogan" prop="sublabelInfo">
                <el-input v-model="form.sublabelInfo" placeholder="请输入Slogan" />
              </el-form-item>

              <el-form-item label="计价类型" prop="chargeType">
                <el-select v-model="form.chargeType" placeholder="请选择计价类型" clearable>
                  <el-option v-for="(item, i) in extData.chargeTypeList || []" :key="i" :value="item.value"
                    :label="item.key"></el-option>
                </el-select>
              </el-form-item>

              <!--产品创建所属用户-->
              <el-form-item label="产品商务" prop="ownerId">
                <el-select v-model="form.ownerId" placeholder="请选择所属用户" clearable>
                  <el-option v-for="(item, i) in extData.ownerInfoList || []" :key="i" :value="item.userId"
                    :label="item.nickname + '(' + item.userId + ')'"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品地址" prop="detailUrl">
                <el-input v-model="form.detailUrl" placeholder="请输入产品地址" />
              </el-form-item>

              <el-form-item label="下载app" prop="downloadFlag">
                <el-select v-model="form.downloadFlag" placeholder="请选择是否下载app" clearable>
                  <el-option value="1" label="是"></el-option>
                  <el-option value="0" label="否"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="产品logo" prop="logoUrl">
                <ImageUpload v-model="form.logoUrl" :limit="1" bizType="PRODUCT" type="cos" />
              </el-form-item>
              <el-form-item label="二维码图片" prop="backgroundLogo">
                <ImageUpload v-model="form.backgroundLogo" :limit="1" bizType="PRODUCT" type="cos" />
              </el-form-item>

              <el-form-item label="放款速度(小时)" prop="speed">
                <el-input v-model="form.speed" placeholder="请输入放款速度" />
              </el-form-item>
              <el-form-item label="贷款期限(期)" prop="loanTime">
                <el-input v-model="form.loanTime" placeholder="请输入贷款期限" />
              </el-form-item>


              <el-form-item label="最高额度(元)" prop="maxAmount">
                <el-input v-model="form.maxAmount" placeholder="请输入最大金额" />
              </el-form-item>

<!--              <el-form-item label="利率信息" prop="maxRate">-->
<!--                <el-input v-model="form.maxRate" placeholder="请输入利率信息" />-->
<!--              </el-form-item>-->
              <el-form-item label="年化率(%)" prop="minRate">
                <el-input v-model="form.minRate" placeholder="请输入年化率" />
              </el-form-item>

            </el-form>
          </div>
        </div>
        <div slot="footer" class="dialog-footer demo-drawer-form__footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 密钥编辑 -->
    <!-- 添加或修改产品收益信息对话框 -->
    <el-dialog :title="title" :visible.sync="openKey" width="600px" append-to-body>
      <el-form ref="formKey" :model="formKey" :rules="rules" label-width="120px">

        <el-form-item label="factoryType" prop="factoryType">
          <el-input v-model="formKey.factoryType" />
        </el-form-item>
        <el-form-item label="apiCode" prop="apiCode">
          <el-input v-model="formKey.apiCode" />
        </el-form-item>
        <el-form-item label="apiKey" prop="apiKey">
          <el-input v-model="formKey.apiKey" />
        </el-form-item>
        <el-form-item label="apiSecret" prop="apiSecret">
          <el-input v-model="formKey.apiSecret" />
        </el-form-item>
        <el-form-item label="pubKey" prop="pubKey">
          <el-input v-model="formKey.pubKey" />
        </el-form-item>
        <el-form-item label="priKey" prop="priKey">
          <el-input v-model="formKey.priKey" />
        </el-form-item>
        <el-form-item label="checkUrl" prop="checkUrl">
          <el-input v-model="formKey.checkUrl" />
        </el-form-item>
        <el-form-item label="loginUrl" prop="loginUrl">
          <el-input v-model="formKey.loginUrl" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormKey">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<style>
.blue-link {
  color: blue;
}
</style>


<script>
import { listProductInfo, getProductInfo, delProductInfo, addProductInfo, updateProductInfo, baseInfoExtData, productSysUserList, getNickNameByUserId } from "@/api/product/productInfo";
import { Message } from "element-ui";

export default {
  name: "ProductInfo",
  data() {
    return {
      extData: {},
      sysUserIdAndNameList: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品基本信息表格数据
      productInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      downloadFlagParams: {
        downloadFlag: '0',
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: null,
        productType: null,
        chargeType: null,
        descInfo: null,
        titleInfo: null,
        labelInfo: null,
        logoUrl: null,
        detailUrl: null,
        maxAmount: null,
        minAmount: null,
        maxRate: null,
        minRate: null,
        status: null,
        adminUrl: null,
        adminAccount: null,
        adminPwd: null,
        factoryType: null,
        apiCode: null,
        apiKey: null,
        apiSecret: null,
        pubKey: null,
        priKey: null,
        loanTime: null,
        speed: null,
        sublabelInfo: null,
        backgroundLogo: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // productName: [
        // { required: true, message: "请输入正确的产品名称格式", trigger: "blur", pattern: /^[^\s]+(\s+[^\s]+)*$/ }
        // ],
        chargeType: [
          { required: true, message: "计价类型(1 uv) (2 注册)不能为空", trigger: "change" }
        ],
        // titleInfo: [
        //   { required: true, message: "推荐语不能为空", trigger: "change" }
        // ],
        labelInfo: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        loanTime: [
          { required: true, message: "放款速度不能为空", trigger: "blur" }
        ],
        speed: [
          { required: true, message: "贷款期限不能为空", trigger: "blur" }
        ],
        minRate: [
          { required: true, message: "年化率不能为空", trigger: "blur" }
        ],
        maxAmount: [
          { required: true, message: "最高额度不能为空", trigger: "blur" }
        ],
        sublabelInfo: [
          { required: true, message: "Slogan不能为空", trigger: "blur" }
        ],
      },
      // 表单参数
      formKey: {},
      // 是否显示弹出层
      openKey: false,
    };
  },
  created() {
    this.getList();
    this.getOptions();
  },
  methods: {
    getOptions() {
      baseInfoExtData().then((response) => {
        console.log(response.data);
        this.extData = response.data;
      });
    },

    /** 查询产品基本信息列表 */
    getList() {
      this.loading = true;
      listProductInfo(this.queryParams).then(response => {
        this.productInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        productName: null,
        productType: null,
        chargeType: null,
        descInfo: null,
        titleInfo: null,
        labelInfo: null,
        logoUrl: null,
        detailUrl: null,
        maxAmount: null,
        minAmount: null,
        maxRate: null,
        minRate: null,
        status: null,
        delFlag: null,
        createTime: null,
        updateTime: null,
        adminUrl: null,
        adminAccount: null,
        adminPwd: null,
        factoryType: null,
        apiCode: null,
        apiKey: null,
        apiSecret: null,
        pubKey: null,
        priKey: null,
        ownerName: null,
        ownerId: null,
        downloadFlag: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      productSysUserList().then(response => {
        this.sysUserIdAndNameList = response.data;
      });
      this.open = true;
      this.title = "添加产品基本信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getProductInfo(id).then(response => {
        this.form = response.data;
        this.form.chargeType = String(this.form.chargeType)
        this.downloadFlagParams.downloadFlag = response.data.downloadFlag.toString();
        this.open = true;
        this.title = "修改产品基本信息";
      });
      productSysUserList().then(response => {
        console.log(response.data);
        this.sysUserIdAndNameList = response.data;
        console.log(this.sysUserIdAndNameList);
      });
    },
    /** 修改按钮操作 */
    handleUpdateKey(row) {
      this.reset();
      const id = row.id || this.ids
      getProductInfo(id).then(response => {
        this.formKey = response.data;
        this.openKey = true;
        this.title = "修改产品密钥信息";
      });
    },

    /** 提交按钮 */
    submitFormKey() {
      this.$refs["formKey"].validate(valid => {
        updateProductInfo(this.formKey).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.openKey = false;
        });

      });
    },
    /** 提交按钮 */
    submitForm() {
      var name = null;
      var own = this.form.ownerId;
      if (own == null) {
        Message.error('所属用户不能为空');
      } else {
        getNickNameByUserId(own).then(response => {
          name = response.data.nickName;
        }).finally(
          () => {
            this.$refs["form"].validate(valid => {
              if (valid) {
                // 获取当前系统用户名称
                // const username = this.$store.state.user.name;
                // const userId = this.$store.state.user.userId;
                // this.form.ownerName = username;
                // this.form.ownerId = userId;
                // console.log("user============"+username+"-------------"+userId);
                this.form.downloadFlag = this.downloadFlagParams.downloadFlag;
                this.form.ownerName = name;
                this.form.detailUrl = (this.form.detailUrl || '').trim();
                if (this.form.id != null) {
                  updateProductInfo(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                  });
                } else {
                  addProductInfo(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  });
                }
              }
            });
          }
        );
      }



    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除产品基本信息编号为"' + ids + '"的数据项？').then(function () {
        return delProductInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('product/productInfo/export', {
        ...this.queryParams
      }, `productInfo_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
